import { ElSubMenu, ElMenuItem } from 'element-plus'
import { unref } from 'vue'
import { hasOneShowingChild } from '../helper'
import { isUrl } from '@/utils/is'
import { useRenderMenuTitle } from './useRenderMenuTitle'
import { pathResolve } from '@/utils/routerHelper'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('submenu')

const { renderMenuTitle } = useRenderMenuTitle()

export const useRenderMenuItem = (menuMode) =>
  // allRouters: AppRouteRecordRaw[] = [],
  {
    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
      if (routers) {
        return routers
          .filter((v) => !v.meta?.hidden)
          .map((v) => {
            const meta = v.meta ?? {}
            const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
            const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')

            if (
              oneShowingChild &&
              (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
              !meta?.alwaysShow
            ) {
              return (
                <ElMenuItem
                  index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
                >
                  {{
                    default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
                  }}
                </ElMenuItem>
              )
            } else {
              return (
                <ElSubMenu
                  index={fullPath}
                  teleported
                  popperClass={
                    unref(menuMode) === 'vertical' ? `${prefixCls}-popper--vertical` : ''
                  }
                >
                  {{
                    title: () => renderMenuTitle(meta),
                    default: () => renderMenuItem(v.children!, fullPath)
                  }}
                </ElSubMenu>
              )
            }
          })
      }
    }

    return {
      renderMenuItem
    }
  }
